<template>
    <!-- 表格区域 -->
    <div class="table-body">
        <el-table border style="width: 100%;" :data="data" v-loading="loading">
            <el-table-column align="center" prop="order_no" :label="$i18n.t('ORDER_NO')" :min-width="170"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="table-pagination">
            <el-pagination
                background
                layout="total, prev, pager, next, ->, sizes"
                :page-size.sync="page.perPage"
                :total="page.total"
                :page-count="page.pageCount"
                :current-page.sync="page.currentPage"
                :page-sizes="PAGES_SIZE"
                @current-change="onCurrentPageChange"
                @size-change="onPerPageChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { PAGES_SIZE } from '@/config/constants'

    export default {
        name: 'UserContact',
        props: [''],
        data () {
            return {
                PAGES_SIZE,
                data: [],
                page: {
                    total: 0,
                    currentPage: 1,
                    perPage: PAGES_SIZE[0],
                    pageCount: 1
                },
                loading: false
            }
        },
        created () {
            this.fetch()
        },
        methods: {
            // 页数切换
            onCurrentPageChange (page) {
                this.page.currentPage = page
                this.fetch()
            },
            // 每页显示数量修改
            onPerPageChange (perPage) {
                this.page.perPage = perPage
                this.fetch()
            },
            // 从接口拉取数据
            fetch () {
                this.loading = true
                getApproveList({
                    ...this.params,
                    page: this.page.currentPage,
                    perPage: this.page.perPage
                }).then((res) => {
                    // eslint-disable-next-line camelcase
                    const { data, last_page, total } = res.result
                    this.data = data
                    this.page.total = total
                    // eslint-disable-next-line camelcase
                    this.page.pageCount = last_page
                }).finally(() => {
                    this.loading = false
                })
            },
        }
    }
</script>

<style scoped>

</style>
